<template>
    <div class="page">
        <nav-top style="position:sticky; top: 0; left: 0;right: 0;"></nav-top>
        <!-- 背景图片 从左到右 从上至下 -->
        <div class="ball1"></div>
        <div class="ball2"></div>
        <div class="ball3"></div>
        <div class="ball4"></div>
        <div class="ball5"></div>
        <div class="ball6"></div>
        <div class="ball7"></div>
        <div class="bg1"></div>
        <div class="bg2"></div>
        <div class="bg3"></div>
        <div class="bg4"></div>
        <div class="main">
            <ul class="avatar-list">
                <li v-for="item in list" :key="item.id" class="mouse-active">
                    <div class="bg">
                        <div class="avatar" :style="{ 'background-image': 'url(' + item.avatar + ')' }"
                            :alt="$i18n.locale == 'zh' ? item.name : item.enName"></div>
                    </div>
                    <div class="item">
                        <div class="group1 group">
                            <p class="p1">{{ item.name }}</p>
                            <p class="p2">{{ item.occupation }}</p>
                        </div>
                        <div class="group2 group">
                            <p class="p3">{{ item.name }}</p>
                            <p class="p4">{{ item.occupation }}</p>
                        </div>
                        <div class="group3 group">
                            <p class="p5">{{ item.enName }}</p>
                            <p class="p6">{{ item.enOccupation }}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<!-- 大赛评委 -->
<script>
import navTop from "@/components/common/nav-top"
export default {
    name: "competitionJudges",
    components: {
        navTop
    },
    data() {
        return {
            list: [{
                id: 1,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/1.png",
                name: "邓子新",
                occupation: "上海交通大学教授",
                enName: "Zixin Deng",
                enOccupation: "Professor at Shanghai Jiaotong University"
            },
            {
                id: 2,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/2.png",
                name: "欧阳颀",
                occupation: "北京大学博雅讲席教授",
                enName: "Qi Ouyang",
                enOccupation: "Professor at Peking University"
            },
            {
                id: 3,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/3.png",
                name: "杨焕明",
                occupation: "华大基因研究院研究员、中国科学院大学及中国医学科学院教授",
                enName: "Huanming Yang",
                enOccupation: "Professor at Beijing Genomics Institute Group, University of Chinese Academy of Sciences & Chinese Academy of Medical Sciences"
            },
            {
                id: 4,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/4.png",
                name: "赵惠民",
                occupation: "伊利诺伊大学香槟分校化学和生物分子工程学系Steven L. Miller讲席教授",
                enName: "Huimin Zhao",
                enOccupation: "Professor of Chemical and Biomolecular Engineering, University of Illinois Urbana-Champaign, USA"
            },
            {
                id: 5,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/5.png",
                name: "SangYup Lee",
                occupation: "韩国科学技术院化学与生物分子工程学特聘教授",
                enName: "SangYup Lee",
                enOccupation: "Professor of Chemical and Biomolecular Engineering at Korea Advanced Institute of Science & Technology, Republic of Korea"
            },
            {
                id: 6,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/6.png",
                name: "黄建东",
                occupation: "香港大学合成生物学讲座教授",
                enName: "Jiandong Huang",
                enOccupation: "Professor of Synthetic Biology, The University of Hong Kong"
            },
            {
                id: 7,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/7.png",
                name: "朱景德",
                occupation: "上海交通大学肿瘤研究所研究员",
                enName: "Jingde Zhu",
                enOccupation: "Professor at Shanghai Jiaotong University"
            },
            {
                id: 8,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/8.png",
                name: "陈国强",
                occupation: "清华大学生命科学院化学工程系教授",
                enName: "Guoqiang Chen",
                enOccupation: "Professor of Chemical Engineeirng, Tsinghua University "
            },
            {
                id: 9,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/9.png",
                name: "张立新",
                occupation: "华东理工大学教授",
                enName: "Lixin Zhang",
                enOccupation: "Professor at East China University of Science and Technology"
            },
            {
                id: 10,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/10.png",
                name: "刘陈立",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Chenli Liu",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 11,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/11.png",
                name: "刘建忠",
                occupation: "中山大学教授",
                enName: "Liuzhong Liu",
                enOccupation: "Professor at Sun Yat-sen University"
            },
            {
                id: 12,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/12.png",
                name: "王钦宏",
                occupation: "中国科学院天津工业生物技术研究所研究员",
                enName: "Qinhong Wang",
                enOccupation: "Professor at Tianjin Institute of Biotechnology, Chinese Academy of Sciences"
            },
            {
                id: 13,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/13.png",
                name: "李永泉",
                occupation: "浙江大学求是特聘教授",
                enName: "Yongquan Li",
                enOccupation: "Professor at Zhejiang University"
            },
            {
                id: 14,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/14.png",
                name: "林影",
                occupation: "华南理工大学生物科学与工程学院教授",
                enName: "Ying Lin",
                enOccupation: "Professor of Biological Sciences and Engineering, South China University of Technology"
            },
            {
                id: 15,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/15.png",
                name: "冯雁",
                occupation: "上海交通大学特聘教授",
                enName: "Yan Feng",
                enOccupation: "Professor at Shanghai Jiaotong University"
            },
            {
                id: 16,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/16.png",
                name: "范代娣",
                occupation: "西北大学生物医药研究院教授",
                enName: "Daidi Fan",
                enOccupation: "Professor of Chemical Engineeirng, Northwest University"
            },
            {
                id: 17,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/17.png",
                name: "许正宏",
                occupation: "江南大学生物工程学院教授",
                enName: "Zhenghong Xu",
                enOccupation: "Professor of Bioengineering, Jiangnan University"
            },
            {
                id: 18,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/18.png",
                name: "叶海峰",
                occupation: "华东师范大学生命科学学院教授",
                enName: "Haifeng Ye",
                enOccupation: "Professor at East China Normal University"
            },
            {
                id: 19,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/19.png",
                name: "林敏",
                occupation: "中国农业科学院生物技术研究所研究员",
                enName: "Min Lin",
                enOccupation: "Professor of Biotechnology, Chinese Academy of Agricultural Sciences"
            },
            {
                id: 20,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/20.png",
                name: "孙际宾",
                occupation: "中国科学院天津工业生物技术研究所研究员",
                enName: "Jibin Sun",
                enOccupation: "Professor at Tianjin Institute of Biotechnology, Chinese Academy of Sciences"
            },
            {
                id: 21,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/21.png",
                name: "吕雪峰",
                occupation: "中国科学院青岛生物能源与过程研究所研究员",
                enName: "Xuefeng Lv",
                enOccupation: "Professor at Qingdao Institute Of Bioenergy & Bioprocess Technology, Chinese Academy Of Sciences"
            },
            {
                id: 22,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/22.png",
                name: "覃重军",
                occupation: "中国科学院分子植物科学卓越创新中心研究员",
                enName: "Zhongjun Qin",
                enOccupation: "Professor at Center for Excellence in Molecular Plant Sciences, Chinese Academy Of Sciences"
            },
            {
                id: 23,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/23.png",
                name: "方柏山",
                occupation: "厦门大学化学化工学院教授",
                enName: "Baishan Fang",
                enOccupation: "Professor of Chemical and Biological Engineering, Xiamen University"
            },
            {
                id: 24,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/24.png",
                name: "李春",
                occupation: "清华大学化学工程系教授",
                enName: "Chun Li",
                enOccupation: "Professor of Chemical Engineering, Tsinghua Univeristy"
            },
            {
                id: 25,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/25.png",
                name: "李盛英",
                occupation: "山东大学微生物技术研究院教授",
                enName: "Shengying Li",
                enOccupation: "Professor at Shandong University"
            },
            {
                id: 26,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/26.png",
                name: "陈依军",
                occupation: "中国药科大学教授",
                enName: "Yijun Chen",
                enOccupation: "Professor at China Pharmaceutical University"
            },
            {
                id: 27,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/27.png",
                name: "张翀",
                occupation: "清华大学化学工程系长聘副教授",
                enName: "Chong Zhang",
                enOccupation: "Professor of Chemical Engineering, Tsinghua Univeristy"
            },
            {
                id: 28,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/28.png",
                name: "钟超",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Chao Zhong",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 29,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/29.png",
                name: "沈玥",
                occupation: "深圳华大生命科学研究院合成生物学首席科学家",
                enName: "Yue Shen",
                enOccupation: "Chief Scientist of Synthetic Biology at Beijing Genomics Institute Group"
            },
            {
                id: 30,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/30.png",
                name: "李全顺",
                occupation: "吉林大学教授",
                enName: "Quanshun Li",
                enOccupation: "Professor at Jilin University"
            },
            {
                id: 31,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/31.png",
                name: "戴磊",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Lei Dai",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 32,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/32.png",
                name: "黄卫人",
                occupation: "深圳市第二人民医院（深圳大学第一附属医院）研究员",
                enName: "Weiren Huang",
                enOccupation: "Professor at The Second People's Hospital of Shenzhen"
            },
            {
                id: 33,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/33.png",
                name: "李铭源",
                occupation: "澳门大学教授",
                enName: "Mingyuan Li",
                enOccupation: "Professor at University of Macau"
            },
            {
                id: 34,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/34.png",
                name: "李祥锴",
                occupation: "兰州大学教授",
                enName: "Xiangkai Li",
                enOccupation: "Professor at Lanzhou University"
            },
            {
                id: 35,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/35.png",
                name: "连佳长",
                occupation: "浙江大学教授",
                enName: "Jiachang Lian",
                enOccupation: "Professor at Zhejiang University"
            },
            {
                id: 36,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/36.png",
                name: "吴边",
                occupation: "中国科学院微生物研究所研究员",
                enName: "Bian Wu",
                enOccupation: "Professor at Institute of Microbiology, Chinese Academy of Sciences"
            },
            {
                id: 37,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/37.png",
                name: "于浩然",
                occupation: "浙江大学化学工程与生物工程学院研究员",
                enName: "Haoran Yu",
                enOccupation: "Professor of Chemical and Biological Engineering, Zhejiang University"
            },
            {
                id: 38,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/38.png",
                name: "叶健文",
                occupation: "华南理工大学生物科学与工程学院副教授",
                enName: "Jianwen Ye",
                enOccupation: "Professor of Biological Sciences and Engineering, South China University of Technology"
            },
            {
                id: 39,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/39.png",
                name: "傅雄飞",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Xiongfei Fu",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 40,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/40.png",
                name: "鲍泽华",
                occupation: "浙江大学杭州国际科创中心生物与分子智造研究院研究员",
                enName: "Zehua Bao",
                enOccupation: "Professor at Hangzhou Global Scientific and Technological Innovation Center, Zhejiang University"
            },
            {
                id: 41,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/41.png",
                name: "何凯",
                occupation: "中国科学院深圳先进技术研究院教授",
                enName: "Kai He",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 42,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/42.png",
                name: "金帆",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Fan Jin",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 43,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/43.png",
                name: "雷瑞鹏",
                occupation: "华中科技大学哲学学院教授",
                enName: "Ruipeng Lei",
                enOccupation: "Professor of Philosophy at Huazhong University of Science and Technology"
            },
            {
                id: 44,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/44.png",
                name: "李峰",
                occupation: "中国科学院武汉病毒研究所研究员",
                enName: "Feng Li",
                enOccupation: "Professor at Wuhan Institute of Virology, Chinese Academy of Sciences"
            },
            {
                id: 45,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/45.png",
                name: "罗小舟",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Xiaozhou Luo",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 46,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/46.png",
                name: "马红武",
                occupation: "中国科学院天津工业生物技术研究所研究员",
                enName: "Hongwu Ma",
                enOccupation: "Professor at Tianjin Institute of Biotechnology, Chinese Academy of Sciences"
            },
            {
                id: 47,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/47.png",
                name: "马迎飞",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Yingfei Ma",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 48,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/48.png",
                name: "倪俊",
                occupation: "上海交通大学生命科学技术学院副教授",
                enName: "Jun Ni",
                enOccupation: "Professor at Shanghai Jiaotong University"
            },
            {
                id: 49,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/49.png",
                name: "司同",
                occupation: "中国科学院深圳先进技术研究院合成生物学研究所研究员",
                enName: "Tong Si",
                enOccupation: "Professor at Shenzhen Institute of Advanced Technology, Chinese Academy of Sciences"
            },
            {
                id: 50,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/50.png",
                name: "王宝俊",
                occupation: "浙江大学杭州国际科创中心合成生物学研究所教授",
                enName: "Baojun Wang",
                enOccupation: "Professor at Hangzhou Global Scientific and Technological Innovation Center, Zhejiang University"
            },
            {
                id: 51,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/51.png",
                name: "谢尚县",
                occupation: "华中科技大学环境资源微生物技术研究所教授",
                enName: "Shangxian Xie",
                enOccupation: "Professor at Huazhong University of Science and Technology"
            },
            {
                id: 52,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/52.png",
                name: "游淳",
                occupation: "中国科学院天津工业生物技术研究所研究员",
                enName: "Chun You",
                enOccupation: "Professor at Tianjin Institute of Biotechnology, Chinese Academy of Sciences"
            },
            {
                id: 53,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/53.png",
                name: "朱志伟",
                occupation: "大连理工大学生物工程学院教授",
                enName: "Zhiwei Zhu",
                enOccupation: "Professor of Biological Engineering, Dalian University of Technology"
            },
            {
                id: 54,
                avatar: "https://originstar.oss-cn-shanghai.aliyuncs.com/contest/user/54.png",
                name: "杜立",
                occupation: "澳门大学法学院副教授",
                enName: "Li Du",
                enOccupation: "Associate Professor at University of Macau"
            }
            ]
        }
    },
    mounted() {
        this.sorts();
    },
    methods: {
        sorts() {
            let sorts = [40, 8, 26, 31, 1, 54, 16, 23, 15, 39, 41, 6, 32, 42, 43, 24, 44, 33, 30, 25, 34, 13, 35, 19, 14, 10, 11, 45, 21, 46, 47, 48, 2, 5, 29, 49, 20, 22, 50, 12, 36, 51, 17, 3, 18, 38, 52, 37, 27, 9, 4, 28, 7, 53];
            let newList = [];
            for (let i = 0; i < sorts.length; i++) {
                for (let j = 0; j < this.list.length; j++) {
                    if (sorts[i] === this.list[j].id) {
                        newList.push(this.list[j])
                    }
                }
            };
            this.list = newList
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    min-height: 100vh;
    position: relative;

    .ball1 {
        pointer-events: none;
        width: 0.69rem;
        height: 0.69rem;
        background: url('@/assets/img/balls2_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 6.03rem;
        top: 9.04rem;
    }

    .ball2 {
        pointer-events: none;
        width: 0.45rem;
        height: 0.45rem;
        background: url('@/assets/img/balls1_3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 4.16rem;
        top: 14.93rem;
    }

    .ball3 {
        pointer-events: none;
        width: 1.39rem;
        height: 1.39rem;
        background: url('@/assets/img/balls1_1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.91rem;
        top: 3.28rem;
    }

    .ball4 {
        pointer-events: none;
        width: 0.83rem;
        height: 0.83rem;
        background: url('@/assets/img/balls1_2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 6.13rem;
        top: 5.52rem;
    }

    .ball5 {
        pointer-events: none;
        width: 2.08rem;
        height: 2.11rem;
        background: url('@/assets/img/balls3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3.07rem;
        bottom: 8rem;
    }

    .ball6 {
        pointer-events: none;
        width: 1.25rem;
        height: 1.28rem;
        background: url('@/assets/img/balls5.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 5.68rem;
        bottom: 6.19rem;
    }

    .ball7 {
        pointer-events: none;
        width: 0.93rem;
        height: 0.96rem;
        background: url('@/assets/img/balls4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.13rem;
        bottom: 4.11rem;
    }

    .bg1 {
        pointer-events: none;
        width: 6.13rem;
        height: 5.23rem;
        background: url('@/assets/img/competitionJudges/bg1.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0;
        top: 0;
    }

    .bg2 {
        pointer-events: none;
        width: 11.25rem;
        height: 7.97rem;
        background: url('@/assets/img/competitionJudges/bg2.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bg3 {
        pointer-events: none;
        width: 10.35rem;
        height: 10.35rem;
        background: url('@/assets/img/competitionJudges/bg3.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 14.8rem;
        bottom: 2.03rem;
    }

    .bg4 {
        pointer-events: none;
        width: 12.13rem;
        height: 6.24rem;
        background: url('@/assets/img/competitionJudges/bg4.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 4.37rem;
        bottom: 0rem;
    }
}

.main {
    width: 51.2rem;
    padding: 3.25rem 9.6rem;
    z-index: 9;
}

.avatar-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);

    li {
        margin-bottom: 0.85rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 6rem;
        transition: all 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);

        .bg {
            margin-bottom: 0.21rem;
            width: 4.8rem;
            height: 4.8rem;
            border-radius: 50%;
            background: #ffffff;
            transition: all 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            border: 2px solid rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);

            .avatar {
                width: 100%;
                height: 100%;
                border-radius: 2.4rem;
                background-repeat: no-repeat;
                background-position: bottom center;
                background-size: contain;
            }
        }

        .item {
            position: relative;

            p {
                width: 100%;
                text-align: center;
            }

            .group {
                width: 100%;
                transition: all 0.3s cubic-bezier(0.42, 0.00, 0.58, 1.00);
            }

            .group1 {
                .p1 {
                    font-size: 0.59rem;
                    font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #212121;
                    line-height: 0.96rem;
                }

                .p2 {
                    font-size: 0.53rem;
                    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #68656C;
                    line-height: 0.85rem;
                }
            }

            .group2 {
                opacity: 0;
                position: absolute;
                top: 0;

                .p3 {
                    font-size: 1.17rem;
                    font-family: 'AlibabaPuHuiTi-Bold', 'AlibabaPuHuiTi';
                    font-weight: bold;
                    color: #212121;
                    line-height: 1.92rem;
                }

                .p4 {
                    font-size: 0.59rem;
                    font-family: 'IdeaFonts-DianHei-FEJ', 'IdeaFonts-DianHei';
                    font-weight: normal;
                    color: #212121;
                    line-height: 0.96rem;
                }
            }

            .group3 {
                opacity: 0;
                position: absolute;
                top: 0;

                .p5 {
                    font-size: 0.59rem;
                    font-family: 'Helvetica-Bold, Helvetica';
                    font-weight: bold;
                    color: #212121;
                    line-height: 0.96rem;
                    word-wrap: break-word;
                    word-break: keep-all;
                    opacity: 1;
                }

                .p6 {
                    font-size: 0.48rem;
                    font-family: 'Helvetica';
                    color: #68656C;
                    line-height: 0.75rem;
                    word-wrap: break-word;
                    word-break: keep-all;
                    opacity: 1;
                }
            }
        }
    }

    li:hover {
        margin-bottom: 2.4rem;

        .bg {
            transform: scale(1.2) translateY(0.32rem);
            background: rgba(255, 255, 255, 0.5);
            border: 2px solid rgba(159, 34, 255, 0.75);

            .avatar {
                height: 150%;
                transform: translateY(-33%);
            }
        }

        .group1 {
            position: absolute;
            top: 0;
            transform: translateY(1.76rem);
            opacity: 0;
        }

        .group2 {
            position: relative;
            opacity: 1;
            top: 1.55rem;
        }

        .group3 {
            position: relative;
            opacity: 1;
            top: 1.91rem;
        }
    }
}
</style>